<template>
  <div
    class="container"
    :style="'background:rgba(255,255,255,'+transition+')'"
  >
    <div class="search">
      <div
        class="input-content"
        @click='goToSearch'
      >
        <icon
          type="search"
          size=14px
        ></icon>
        <span class="placeholder">快速搜索你想要的内容</span>
      </div>
    </div>
    <div
      class="fenlei-icon"
      @click="isShow = true"
    >
      <img
        src="../images/hamburger.png"
        mode="aspectFit"
      >
      <p>分类</p>
    </div>
    <div
      class="fenlei"
      v-show="isShow"
      @touchmove.stop="preventScroll"
      :style="'top:'+fiexTop+'px'"
    >
      <div :class="isShow?'fenlei-container slideShow':'fenlei-container'">
        <div class="fenlei-row">
          <div
            class="fenlei-col"
            @click="isShow = false"
          >
            <img
              src="../images/arrow_left.png"
              mode="aspectFit"
            >
            <p>分类</p>
          </div>
        </div>
        <scroll-view
          :scroll-y="true"
          class="scroll-container"
        >
          <div
            v-for="(item, index) in subject"
            :key="index"
            class="fenlei-row"
          > 
            <a
              hover-class="none"
              :href="'/pages/wines/main?product_id='+item.product_ids+'&title='+item.title"
              class="fenlei-col bg"
            >
              <div>{{item.title}}</div>
              <img
                src="../images/arrow_right.png"
                mode="aspectFit"
              >
            </a>
          </div>
          <div class="fenlei-row">
            <p class="liebei">葡萄酒类别</p>
          </div>
          <div class="fenlei-row">
            <div
              v-for="(item, index) in feilie1"
              :key="index"
              :class="liebeiActivedItem===index?'tags tagsSelected':'tags'"
              @click='toggleSelected(1,index)'
            >{{item.cate_name}}</div>
          </div>
          <div class="fenlei-row">
            <p class="liebei">葡萄酒产区</p>
          </div>
          <div class="fenlei-row">
            <div
              v-for="(item, index) in feilie2"
              :key="index"
              :class="producingUnitActivedItem===index?'tags tagsSelected':'tags'"
              @click='toggleSelected(2,index)'
            >{{item.cate_name}}</div>
          </div>
        </scroll-view>
        <div class="fenlei-row">
          <button
            @click="findProduct"
            class="btn"
          >确定</button>
        </div>
      </div>
      <div
        class="module"
        @click="isShow = false"
      ></div>
    </div>
  </div>
</template>

<script>
import { request } from '@/utils'
export default {
  data () {
    return {
      fiexTop: 65,
      transition: 0,
      isShow: false,
      liebeiActivedItem: null,
      producingUnitActivedItem: null,
      feilie1: null,
      feilie2: null,
      subject: null
    }
  },
  methods: {
    goToSearch () {
      wx.navigateTo({
        url: '/pages/search/main'
      })
    },
    preventScroll () {

    },
    toggleSelected (target, index) {
      if (target === 1) {
        this.liebeiActivedItem = this.liebeiActivedItem === index ? null : index
      } else {
        this.producingUnitActivedItem =
          this.producingUnitActivedItem === index ? null : index
      }
    },
    async getCategoryInfo () {
      var res = await request('/v1/category', 'get', { parent_id: 1 }, 'showLoading')
      this.feilie1 = res.data.items
      res = await request('/v1/category', 'get', { parent_id: 2 }, null)
      this.feilie2 = res.data.items
      res = await request('/v1/category/get-product-area', 'get', {
        is_show: 1
      }, null)

      if (res.data) {
        var items = res.data.items
        for (var i in items) {
          if (items[i].title === '精选推荐') {
            items.splice(i, 1)
          }
        }
        this.subject = items
      }
    },
    findProduct () {
      var cateId =
        this.producingUnitActivedItem !== null
          ? this.feilie2[this.producingUnitActivedItem].id
          : 0
      var parentId =
        this.liebeiActivedItem !== null
          ? this.feilie1[this.liebeiActivedItem].id
          : 0
      wx.navigateTo({
        url: '/pages/wines/main?cateId=' + cateId + '&parent_id=' + parentId
      })
    }
  },
  mounted () {
    this.fiexTop = this.globalData.height - 8
    this.getCategoryInfo()
  }
  // onPageScroll: function(e) {
  //   this.transition = e.scrollTop / 400;
  // console.log(this.transition)
  // }
}
</script>

<style lang="scss" scoped>
@keyframes slideShow {
  from {
    left: 750rpx;
  }
  to {
    left: 150rpx;
  }
}
@-webkit-keyframes slideShow {
  from {
    left: 750rpx;
  }
  to {
    left: 150rpx;
  }
}
.container {
  .slideShow {
    animation: slideShow 0.2s linear;
    animation-fill-mode: both;
  }
  .fenlei {
    position: fixed;
    left: 0;
    
    height: 100%;
    width: 750rpx;
    background: rgba(41, 40, 40, 0.5);
    z-index: 5;
    .module {
      width: 150rpx;
      height: 100%;
      background: transparent;
    }
    .fenlei-container {
      width: 600rpx;
      height: 100%;
      background: #fff;
      position: absolute;
      left: 750rpx;
      top: 0rpx;
      .scroll-container {
        height: 75%;
      }
      .fenlei-row {
        display: flex;
        padding: 0rpx 30rpx 0;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        .btn {
          border: none;
          background: #cdb27e;
          color: #fff;
          height: 80rpx;
          width: 200rpx;
          line-height: 80rpx;
          border-radius: 40rpx;
          font-size: 32rpx;
          // margin-top: 10rpx;
        }
        .liebei {
          margin: 30rpx 0 30rpx;
          padding: 0 30rpx;
          border-left: 7rpx solid #000;
          line-height: 38rpx;
        }
        .tags {
          width: 260rpx;
          height: 80rpx;
          border: 0.5rpx solid rgba(40, 40, 40, 0.2);
          border-radius: 40rpx;
          text-align: center;
          line-height: 80rpx;
          font-size: 26rpx;
          margin-bottom: 15rpx;
          color: #585858;
        }
        .tagsSelected {
          border: 0.5rpx solid #cdb27e;
          color: #cdb27e;
        }
        .fenlei-col {
          height: 80rpx;
          display: flex;
          flex-direction: row;
          align-items: center;
          img {
            width: 30rpx;
            height: 30rpx;
            display: inline-block;
            margin-right: 20rpx;
          }
          p {
            font-size: 36rpx;
          }
        }
      }
      .fenlei-col.bg {
        margin-bottom: 15rpx;
        background: #f6f6f6;
        padding: 15rpx 0rpx 15rpx 30rpx;
        width: 100%;
        justify-content: space-between;
        border-radius: 10rpx;
        img {
          width: 40rpx;
          height: 30rpx;
        }
        div {
          color: #6f6f6f;
          font-size: 26rpx;
        }
      }
    }
  }
  box-sizing: border-box;
  // position: fixed;
  top: 150rpx;
  left: 0;
  width: 750rpx;
  padding: 0 25rpx;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  .search {
    position: relative;
    padding: 10rpx 0;
    .input-content {
      height: 60rpx;
      background: #f8f8f8;
      border-radius: 30rpx;
      padding: 0 60rpx;
      width: 650rpx;
      line-height: 60rpx;
      text-align: center;
      .placeholder {
        color: #7f7f7f;
        font-size: 14px;
      }
      icon {
        position: relative;
        top: 4rpx;
        left: -5rpx;
      }
    }
  }
  .fenlei-icon {
    margin-top: 20rpx;
    height: 50rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    img {
      width: 40rpx;
      height: 24rpx;
    }
    p {
      color: #6e6e6e;
      font-size: 10px;
    }
  }
}
</style>
